<template>
	<view class="index-page page">
		<CustomNav title="肃北报灾平台"></CustomNav>
		<view class="tips-content">
			<view class="title FZHZGBJ">实时预警通知</view>
			<view class="line"></view>
			<view class="swiper-item">
				<swiper autoplay="true" class="notice-list" vertical="true" interval="8000">
					<swiper-item v-for="(item,index) in newsList" :key="item.id" class="notice-item"
						@click="navigate('/page_pack/notice/detail?id='+item.id)">
						<view class="news">{{item.title}}</view>
					</swiper-item>
				</swiper>
				<view class="iconfont icon-a-216gengduo-shuxiang" @click="navigate('/page_pack/notice/list')"></view>
			</view>
		</view>
		<map :longitude="mapConf.longitude" :latitude="mapConf.latitude" :scale="mapConf.scale"
			:markers="mapConf.markers" id="map" @markertap="markertap"></map>
		<view class="menu-block">
			<view class="menu-item" @click="navigate('/page_pack/contact/contact')">
				<view class="neme FZHZGBJ">紧急</view>
				<view class="neme FZHZGBJ">联系</view>
			</view>
			<view class="menu-item" @click="navigate('/page_pack/animal/animal')">
				<view class="neme FZHZGBJ">野生</view>
				<view class="neme FZHZGBJ">动物</view>
			</view>
		</view>
		<view class="btn-item">
			<view class="btn" @click="navigate('/page_pack/report/report')">
				<view class="btn normal">一键报灾</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWarningList
	} from '@/api/contact.js'
	import {
		getAnimalRecordList
	} from '@/api/animal.js'
	export default {
		data() {
			return {
				mapConf: {
					longitude: 94.87651,
					latitude: 39.51323,
					scale: 15,
					markers: [
						{
							id: 1, // Number
							title: '1', // String-标注点名
							rotate: 0, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
							alpha: 1, // 默认1，无透明，范围 0 ~ 1
							longitude: 94.876517,
							latitude: 39.513232,
							width: 30,
							height: 36,
							iconPath: 'https://www.mashangjiuye.cn/file/91885/dunhuang/lMkpNQQOqj.png', // 显示的图标
						},
						{
							id: 1, // Number
							title: '野生动物观察记录', // String-标注点名
							rotate: 0, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
							alpha: 1, // 默认1，无透明，范围 0 ~ 1
							longitude: 94.88,
							latitude: 39.52,
							width: 30,
							height: 36,
							iconPath: 'https://www.mashangjiuye.cn/file/91885/dunhuang/lMkpNQQOqj.png', // 显示的图标
						}
					],
				},
				newsList: [],
				conf: {
					page: 1,
					limit: 6
				}
			}
		},
		methods: {
			//onShareAppMessage 分享给朋友
			//onShareTimeline  分享到朋友圈
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					path: '/pages/index/index'
				}
			},
			// #endif
			onShareTimeline(res) {
				let distSource = uni.getStorageSync('distSource');
				if (distSource) {
					return {
						//title: this.list.jobTitle,
						path: '/pages/index/index',
						type: 0,
						query: 'id=' + distSource,
					}
				}
			},
			getList() {
				getWarningList(this.conf).then(res => {
					this.newsList = res.list
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
			},
		},
		onShow() {
			// let position = this.$store.getters.position;
			// if (position) {
			// 	console.log(99999)
			// 	console.log(position)
			// 	this.mapConf.longitude = position.longitude;
			// 	this.mapConf.latitude = position.latitude
			// };
			this.getList()
		},
	}
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;
		width: 100vw;
		height: 100vh;

		.tips-content {
			width: calc(100% - 40rpx);
			margin: auto;
			background-color: #D83032;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			position: fixed;
			top: 13%;
			left: 20rpx;
			z-index: 20;
			display: flex;
			align-items: center;
			padding: 30rpx 22rpx;
			color: #fff;

			.title {
				font-size: 34rpx;
				width: 206rpx;
			}

			.line {
				margin-left: 10rpx;
				width: 4rpx;
				height: 36rpx;
				border-radius: 4rpx;
				background-image: linear-gradient(#E47273, #fff, #E47273);
			}

			.swiper-item {
				width: calc(100% - 215rpx);
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.notice-list {
					color: #fff;
					height: 60rpx;
					margin-left: 10rpx;
					width: 100%;

					.notice-item {
						height: 60rpx;
						display: flex;
						align-items: center;

						.news {
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.iconfont {
					color: #fff;
					font-size: 34rpx;
					margin-right: 0;
				}
			}
		}

		map {
			width: 100%;
			height: 100%;
		}

		.menu-block {
			position: fixed;
			z-index: 20;
			bottom: 55%;
			right: 3%;

			.menu-item {
				background-color: #C0D3FB;
				color: #0256FF;
				padding: 20rpx 25rpx;
				margin-bottom: 30rpx;
				border-radius: 20rpx;

				.name {
					font-size: 36rpx;
				}
			}
		}

		.btn-item {
			width: 100%;
			position: fixed;
			z-index: 20;
			bottom: 5%;
			display: flex;
			justify-content: center;
		}
	}
</style>